<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Inner Page - Delicious Bootstrap Template</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link th:href="@{/assets/img/favicon.png}" rel="icon">
  <link th:href="@{/assets/img/apple-touch-icon.png}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,600,600i,700,700i|Satisfy|Comic+Neue:300,300i,400,400i,700,700i"
        rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link th:href="@{/assets/vendor/animate.css/animate.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/boxicons/css/boxicons.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/glightbox/css/glightbox.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/swiper/swiper-bundle.min.css}" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link th:href="@{/assets/css/style.css}" rel="stylesheet">
</head>

<body>
<section th:replace="index::#hero"></section>

<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center fixed-top ">
  <div class="container-fluid container-xl d-flex align-items-center justify-content-center justify-content-lg-start">
    <i class="bi bi-phone d-flex align-items-center"><span>+1 5589 55488 55</span></i>
    <i class="bi bi-clock ms-4 d-none d-lg-flex align-items-center"><span>Mon-Sat: 11:00 AM - 23:00 PM</span></i>
  </div>
</section>

<!-- ======= Header ======= -->
<header th:replace="index::#header"></header><!-- End Header -->

<main id="main">

  <section id="book-a-table" class="book-a-table">
    <div class="container">

      <div class="section-title">
        <h2>Book a <span>Table</span></h2>
        <p>以服务求生存，以管理求效率，以品质求发展。</p>
      </div>

      <form action="book" method="post" role="form" class="php-email-form" id="app">
        <div class="row">
          <div class="col-lg-4 col-md-6 form-group">
            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" th:value="${user.name}">
            <div class="validate"></div>
          </div>
          <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" th:value="${user.email}">
            <div class="validate"></div>
          </div>
          <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
            <input type="text" class="form-control" name="phone" id="phone" placeholder="Your Phone" th:value="${user.phone}">
            <div class="validate"></div>
          </div>
          <div class="col-lg-4 col-md-6 form-group mt-3">
            <input type="date" class="form-control" name="time" id="time" placeholder="Time" v-model="time">
            <div class="validate"></div>
          </div>
          <div class="col-lg-4 col-md-6 form-group mt-3">
            <input type="number" class="form-control" name="people" id="people" placeholder="人数" v-model="people">
            <div class="validate"></div>
          </div>
        </div>
        <div class="form-group mt-3">
          <textarea class="form-control" name="message" rows="5" placeholder="备注信息" v-model="message"></textarea>
          <div class="validate"></div>
        </div>
        <div class="mb-3">
          <div class="loading">Loading</div>
          <div class="error-message"></div>
          <div class="sent-message">Your booking request was sent. We will call back or send an Email to
            confirm your reservation. Thank you!
          </div>
        </div>
        <div class="text-center">
          <button type="submit" @click.prevent="book()">提交</button>
        </div>
      </form>

    </div>
  </section><!-- End Book A Table Section -->

</main><!-- End #main -->

<!-- ======= Footer ======= -->
<footer th:replace="index::#footer"></footer><!-- End Footer -->

<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
        class="bi bi-arrow-up-short"></i></a>

<!-- Vendor JS Files -->
<script th:src="@{/assets/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/assets/vendor/glightbox/js/glightbox.min.js}"></script>
<script th:src="@{/assets/vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<script th:src="@{/assets/vendor/swiper/swiper-bundle.min.js}"></script>
<script th:src="@{/assets/vendor/php-email-form/validate.js}"></script>

<!-- Template Main JS File -->
<script th:src="@{/assets/js/main.js}"></script>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
<script>
  var v = new Vue({
    el:"#app",
    data:{
      time: "",
      people: "",
      message: ""
    },
    methods:{
      book: function () {
        let url = "book";
        let params =  new URLSearchParams();
        params.append("message",this.message);
        params.append("people",this.people);
        params.append("time",this.time);
        axios.post(url,params).then(res=>{
          if(res.data.code == 1){
            window.location.href="index";
          }else{
            alert(res.data.msg);
          }
        })
      },
      info:function () {
        let url = "bookinfo";
      }
    }
  })
</script>
</body>
</html>